import React, { useState, useEffect } from 'react';
import { getColumnsById } from '../../api/column/apiFunctions';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  Paper,
  Typography,
  CircularProgress,
  Snackbar,
} from '@mui/material';
import { useParams } from 'react-router-dom';

const ColumnsOfTable = () => {
  const [Columns, setColumns] = useState([]);
  const [loading, setLoading] = useState(false);
  const [snackbarMessage, setSnackbarMessage] = useState('');
  const { tableId } = useParams();
  const { tableName } = useParams();
  useEffect(() => {
    fetchColumns();
  }, []);

  const fetchColumns = async () => {
    setLoading(true);
    try {
      const response = await getColumnsById(tableId); // 更新为获取所有列
      setColumns(response.data);
    } catch (error) {
      console.error('Error fetching Columns:', error);
    }
    setLoading(false);
  };

  return (
    <Paper>
      <Typography variant="h6" component="div">
      {tableName}
      </Typography>

      {loading ? (
        <CircularProgress />
      ) : (
        <Table>
          <TableHead>
            <TableRow>
             {['ID', '列名称', '类属性', '数据类型', 'java类型', 'NULL','键'].map((header) => (
                <TableCell key={header}>{header}</TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {Columns.map((item) => (
              <TableRow key={item.id}>
                <TableCell>{item.id}</TableCell>
                <TableCell>{item.columnName}</TableCell>
                <TableCell>{item.fieldName}</TableCell>
                <TableCell>{item.dataType}</TableCell>
                <TableCell>{item.javaType}</TableCell>
                <TableCell>{item.isNullable}</TableCell>
                <TableCell>{item.columnKey}</TableCell>
                <TableCell>{item.columnDefault}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      )}

      <Snackbar
        open={!!snackbarMessage}
        autoHideDuration={6000}
        onClose={() => setSnackbarMessage('')}
        message={snackbarMessage}
      />
    </Paper>
  );
};

export default ColumnsOfTable;
